import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

import '../common/image_swiper.dart';
import '../data/mock_data.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // title: Text("dd"),
        title: Container(
          // height: 25,
          margin: const EdgeInsets.symmetric(horizontal: 5),
          padding: const EdgeInsets.symmetric(horizontal: 5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            color: Colors.black,
          ),
          child: const Text("VV", style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w900,
            fontSize: 20,
          )),
        ),
        actions: [
          IconButton(
            onPressed: () {
              print("查询");
            },
            icon: const Icon(Icons.search, size: 24)
          ),
          const SizedBox(width: 10),
        ]
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        children: [
          ImageSwiper(
            images: MockData.imgList.map((item) => Center(child: Image.network(item, fit: BoxFit.cover, width: double.infinity))).toList(),
            borderRadius: BorderRadius.circular(16)
          ),
          const SizedBox(height: 12),
          ImageSwiper(
            images: MockData.noticeList.map((item) => Center(child: Column(
            children: [
              const SizedBox(height: 16),
              Container(
                // 设置设置背景颜色解决文字定位被截断的问题，具体原因不详
                color: const Color(0xFFF4F5FA),
                child: Text(
                  item["title"]!,
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500, color: Color(0xFF141519))
                ),
              ),
              const SizedBox(height: 8),
              Text(
                item["subTitle"]!,
                textAlign: TextAlign.center,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w300, color: Color(0xFF86909C))
              ),
            ],
            ))).toList(),
            backgroundColor: const Color(0xFFF4F5FA),
            dotActiveColor: const Color(0xFF141519),
            height: 94,
            autoPlay: false,
            borderRadius: BorderRadius.circular(12),
            // padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
          ),
          // 热点 & 最新`
          const SizedBox(height: 24),
          Row(
              children: [
                GestureDetector(
                  child: const Text("HOT", style: TextStyle(fontWeight: FontWeight.w800, fontSize: 24, color: Colors.black)),
                  onTap: () {},
                ),
                const SizedBox(width: 24),
                GestureDetector(
                  child: const Text("NEW", style: TextStyle(fontWeight: FontWeight.w800, fontSize: 24, color: Color(0xFF86909C))),
                  onTap: () {},
                ),
              ]
          ),
          const SizedBox(height: 8),
          CarouselSlider(
            disableGesture: true,
            options: CarouselOptions(
              height: 250,
              autoPlay: false,
              viewportFraction: 0.6,
              padEnds: false,
              pageSnapping: false,
              enableInfiniteScroll: false,
            ),
            items: MockData.imgList.map((item) => Container(
              margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(12.0),
                    child: Image.network(item, fit: BoxFit.cover, width: 204, height: 204),
                  ),
                  const SizedBox(height: 8),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Virtually-002", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w400)),
                            Text("¥ 998.0", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
                          ],
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(12.0),
                          child: Image.network(item, fit: BoxFit.cover, width: 24, height: 24),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            )).toList(),
          ),
          const SizedBox(height: 32),
          // 皮肤
          const Text("THEME", style: TextStyle(fontWeight: FontWeight.w800, fontSize: 24, color: Colors.black)),
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: MockData.imgList.map((item) => Container(
                height: 200,
                width: 128,
                margin: const EdgeInsets.fromLTRB(0, 0, 8, 0),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(item),
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      height: 52,
                      width: 52,
                      margin: const EdgeInsets.fromLTRB(8, 0, 0, 8),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: const Color(0xFFF5F5F5),
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(8),
                        image: DecorationImage(
                          image: NetworkImage(MockData.iconList[0]),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Container(
                      height: 52,
                      width: 52,
                      margin: const EdgeInsets.fromLTRB(0, 0, 8, 8),
                      padding: const EdgeInsets.all(1),
                      clipBehavior: Clip.hardEdge,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: const Color(0xFFF5F5F5),
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(8),
                        image: DecorationImage(
                          image: NetworkImage(MockData.iconList[1]),
                          fit: BoxFit.cover,
                        ),
                      ),
                    )
                  ],
                ),
              )).toList(),
            ),
          ),
          const SizedBox(height: 24),
          // DAO NFT
          const Text("DAO NFT", style: TextStyle(fontWeight: FontWeight.w800, fontSize: 24, color: Colors.black)),
          const SizedBox(height: 8),
          Container(
            width: double.infinity,
            height: 336,
            clipBehavior: Clip.hardEdge,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(MockData.iconList[2]),
                fit: BoxFit.cover,
              ),
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
                bottomLeft: Radius.circular(4),
                bottomRight: Radius.circular(4),
              ),
            ),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: List.generate(MockData.imgList.length, (i) => i).map((i) => Container(
                  height: 169,
                  margin: EdgeInsets.fromLTRB(i == 0 ? 32 : 12, 0, MockData.imgList.length - 1 == i ? 32 : 12, 20),
                  clipBehavior: Clip.hardEdge,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 2,
                      color: Colors.white,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    children: [
                      ClipRRect(
                        clipBehavior: Clip.hardEdge,
                        borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(8),
                          topLeft: Radius.circular(8),
                        ),
                        child: Image.network(
                            MockData.imgList[i],
                          width: 128,
                          height: 128,
                          fit: BoxFit.cover
                        ),
                      ),
                      Container(
                        width: 128,
                        height: 37,
                        alignment: Alignment.center,
                        clipBehavior: Clip.hardEdge,
                        decoration: BoxDecoration(
                          color: const Color(0xFF606465).withOpacity(0.9),
                          borderRadius: const BorderRadius.only(
                            bottomLeft: Radius.circular(8),
                            bottomRight: Radius.circular(8),
                          ),
                        ),
                        child: const Text("ROLE",
                          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.white),
                        ),
                      )
                    ],
                  ),
                )).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
